/**
 * Created by maiseries on 2018/1/24.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    TouchableWithoutFeedback,
    Modal,
    Animated
} from 'react-native';

let self = null;
let canRun = true;

export default class MidPopupModal extends React.Component {

    static propTypes = {
        style: React.PropTypes.number,
        btnText: React.PropTypes.string,
        btnOnPress: React.PropTypes.func,
        cancel: React.PropTypes.bool,
        cancelOnPress: React.PropTypes.func,
        visible: React.PropTypes.bool,
        text: React.PropTypes.string
    }

    static defaultProps = {
        visible: false,
        cancel: true,
        btnText: '确定'
    };


    constructor(prop) {
        super(prop);
        this.state = {
            x: new Animated.Value(0)
        };
        self = this;
    }

    componentDidMount() {
        this.lineAnimated();
    }

    componentWillUnmount() {
        canRun = false;
    }

    lineAnimated() {
        canRun = true;
        self.state.x.setValue(0);
        Animated.timing(self.state.x,{
            duration: 3000,
            toValue: 1
        }).start(()=>{
            if(canRun) self.lineAnimated()
        })
    }

    render() {
        return (
            <Modal onRequestClose={()=>{}} animationType={'fade'} transparent={true} visible={this.props.visible}>
                <View style={[base.clientWH, base.columnCC, styles.bg]}>
                    <View style={[base.columnCC, styles.container, this.props.style]}>
                        <Image
                            resizeMode={'cover'}
                            source={require('../sources/image_auth_approving.png')}
                            style={styles.topBox}>
                            <Animated.Image
                                resizeMode={'cover'}
                                source={require('../sources/image_auth_approving_line.png')}
                                style={[styles.line, {
                                    opacity: this.state.x,
                                    transform: [
                                        {
                                            translateX: this.state.x.interpolate({
                                                inputRange: [0, 1],
                                                outputRange: [layout.MAX_WIDTH, layout.width(-268)]
                                            })
                                        }
                                    ]
                                }]}/>
                            {
                                this.props.cancel ?
                                    <TouchableWithoutFeedback
                                        activeOpacity={layout.TOUCH_OPACITY_ACTIVE}
                                        onPress={() => this.props.cancelOnPress ? this.props.cancelOnPress() : {}}>
                                        <View style={styles.cancelBox}>
                                            <Image
                                                resizeMode={'contain'}
                                                source={require('../sources/icon_tab_close.png')}
                                                style={styles.cancel}/>
                                        </View>
                                    </TouchableWithoutFeedback> :
                                    <View/>
                            }
                        </Image>
                        <View style={styles.midBox}>
                            <Text allowFontScaling={false} style={styles.content}>{this.props.text}</Text>
                        </View>
                        <View style={styles.bottomBox}>
                            <TouchableOpacity
                                activeOpacity={layout.TOUCH_OPACITY_ACTIVE}
                                onPress={() => this.props.btnOnPress ? this.props.btnOnPress() : {}}>
                                <View style={styles.btnBox}>
                                    <Text allowFontScaling={false} style={styles.btnText}>{this.props.btnText}</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </Modal>
        )
    }
}

const styles = StyleSheet.create({
    bg: {
        paddingBottom: layout.height(100),
        backgroundColor: 'rgba(0,0,0,0.6)',
    },
    container: {
        width: layout.width(500),
        borderRadius: layout.width(20),
        overflow: 'hidden',
        backgroundColor: '#fff'
    },
    topBox: {
        width: layout.width(500),
        height: layout.height(210),
    },
    line: {
        width: layout.width(160),
        height: layout.height(210)
    },
    cancelBox: {
        position: 'absolute',
        right: 0,
        top: 0,
        width: layout.width(64),
        height: layout.height(64),
        padding: layout.width(12)
    },
    cancel: {
        width: layout.width(40),
        height: layout.height(40),
    },
    midBox: {
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        paddingVertical: layout.GAP_VERTICAL_LARGE
    },
    content: {
        fontSize: layout.font(28),
        color: layout.MAIN_AUX_COLOR
    },
    bottomBox: {
        width: layout.width(500),
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE * 2,
        paddingBottom: layout.GAP_VERTICAL_MID
    },
    btnBox: {
        alignSelf: 'stretch',
        paddingVertical: layout.GAP_VERTICAL_SMALL,
        borderRadius: layout.width(40),
        backgroundColor: layout.MAIN_COLOR,
    },
    btnText: {
        color: '#fff',
        fontSize: layout.font(32),
        backgroundColor: 'transparent',
        textAlign: 'center'
    },
})